<template>


<div class="page">
      <el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
            <!-- 搜索框-->
          
            <el-form-item prop="departmentName">
                  <el-select v-model="searchForm.departmentName" placeholder="请选择隶属部门" size="small" style="width: 100%;" @change="changeDepartment">
                    <el-option
                      v-for="item in departmentList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
         </el-form-item>
         <el-form-item prop="groupName">
                  <el-select v-model="searchForm.groupName" placeholder="请选择小组" size="small" style="width: 100%;" @change="changeGroup">
                    <el-option
                      v-for="item in groupList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
         </el-form-item>
        <el-form-item prop="region">
                  <el-select v-model="searchForm.region" placeholder="请选择个人" size="small" style="width: 100%;">
                    <el-option
                      v-for="item in userList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
         </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="refreshList()" size="small" icon="el-icon-search">查询</el-button>
            <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
          </el-form-item>
      </el-form>
        
      <div class="bg-white top">
      <div ref="container" id="container"></div>
      </div>
  </div>
 
</template>

<script>
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        inputForm: {
          id: '',
          buildingName: '',
          buildingStatus: '',
          subwayLine: '',
          metroStation: '',
          isDoorcontrol: '',
          isElevatorswiping: '',
          contactAddress: '',
          longitude: '',
          latitude: '',
          region: '',
          remarks: ''
        },
        regionList: [],
        markersArray:[],
        queryAllMapList:[],
        departmentList:[],
        groupList:[],
        userList:[]
      }
    },
    created() {
      
      this.initMap();
    },
    components: {
    },
    methods: {
      queryAllMap(){
        this.$http({
          url: '/tcardrecordinfo/tCardcecordInfo/queryAllMap',
          method: 'get'
        }).then(({data}) => {
          if (data && data.success) {
            data.page.forEach(e => {
              this.queryAllMapList.push({
                value: e.region,
                label: e.region
              })
            });
          }
        })
      },
      initMap(longitude, latitude) {
        var that = this;
        let address = "";
        let lat = "39.90880103757871";
        let logt = "116.39747081324458";
        // var center = new TMap.LatLng(39.984104, 116.307503);
        //     //初始化地图
        //     var map = new TMap.Map("container", {
        //         rotation: 20,//设置地图旋转角度
        //         pitch:30, //设置俯仰角度（0~45）
        //         zoom:12,//设置地图缩放级别
        //         center: center//设置地图中心点坐标
        //     });
        if (!longitude) {
          let lat = latitude;
          let logt = longitude;
        }
        if (that.inputForm.latitude === '') {
          var center = new qq.maps.LatLng(lat, logt);
        } else {
          var center = new qq.maps.LatLng(that.inputForm.latitude, that.inputForm.longitude);
        }
        var map = new qq.maps.Map(document.getElementById("container"), {
          center: center,
          zoom: 13,
          disableDefaultUI: true,
        });
        var marker = new qq.maps.Marker({
          position: center,
          map: map,
        });
        that.markersArray.push(marker);
        var infoWin = new qq.maps.InfoWindow({
          map: map,
        }); //此处是点击地图后生成的地标名称
        var geocoder = new qq.maps.Geocoder({
          complete: function (res) {
            console.log(res);
            that.deleteOverlays();
            map.setCenter(res.detail.location);
            var marker = new qq.maps.Marker({
              map: map,
              position: res.detail.location,
            });
            that.markersArray.push(marker);
          },
        });

        qq.maps.event.addListener(map, "click", function (event) {
          that.deleteOverlays();
          that.inputForm.latitude = event.latLng.getLat();
          that.inputForm.longiistude = event.latLng.getLng();
          console.log(that.inputForm.longiistude, that.inputForm.latitude);
          that.inputForm.longitude = that.inputForm.longiistude;
          that.inputForm.latitude = that.inputForm.latitude;
          var position = new qq.maps.LatLng(that.inputForm.latitude, that.inputForm.longitude);
          var marker = new qq.maps.Marker({
            map: map,
            position: position
          });
          that.markersArray.push(marker);
        });
        document.getElementById("handleinput").addEventListener("blur", function () {
          geocoder.getLocation(that.inputForm.contactAddress);
        });
      },
      deleteOverlays() {
        if (this.markersArray) {
          for (var i in this.markersArray) {
            this.markersArray[i].setMap(null);
          }
          this.markersArray.length = 0;
        }
      },
       // 获取所有部门信息
      getDepartmentInfo() {
        this.$http({
          url: '/tdepartmentinfo/tDepartmentInfo/list',
          method: 'get',
          params: {
            'pageNo': this.pageNo,
            'pageSize': 999999,
            'orderBy': this.orderBy
          }
        }).then(({data}) => {
          this.departmentList = []
         data.page.list.forEach(e => {
           this.departmentList.push({
            value:e.id,
            label:e.departmentName
          })
         });
        })
      },
      // 选中团队获取想对应的小组信息
      changeDepartment(e) {
        this.$http({
          url: '/tuserinfo/tUserInfo/queryUserInfoByGroupId',
          method: 'get',
          params: {
            id:e
          }
        }).then(({data}) => {
          this.groupList = []
         data.result.forEach(e => {
           this.groupList.push({
            value:e.id,
            label:e.groupName,
          })
         });
        })
      },
      // 选中团队获取对应的成员信息
      changeGroup(e) {
        this.$http({
          url: '/tgroupinfo/tGroupInfo/queryUserInfoByGroupId',
          method: 'get',
          params: {
            id:e
          }
        }).then(({data}) => {
          this.userList = []
         data.result.forEach(e => {
           this.userList.push({
            value:e.id,
            label:e.fullName,
          })
         });
        })
      },
    }
  }
</script>
<style>
  #container {
    width: 750px;
    height: 500px;
  }
</style>